<template>
  
    <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    style="border-radius: 8px;"
    text-color="#ffd04b"
    active-text-color="#fff"
    :ellipsis="false"
    background-color="var(--el-bg-header-color)"
    @select="handleSelect"
  >
    <el-menu-item index="0">
        <el-page-header :icon="ArrowLeft">
            <template #content>
            <span class="text-large font-600 mr-3"> Title </span>
            </template>
        </el-page-header>
    </el-menu-item>
    <div class="flex-grow" />
    <el-menu-item >
        <el-avatar
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      />
    </el-menu-item>
  </el-menu>
   
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ArrowLeft } from '@element-plus/icons-vue'



const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style>
    .flex-grow {
         flex-grow: 1;
        
    }
    .el-menu-demo{
        padding: 0;
    }
</style>